﻿<%@ Page Language="C#" MasterPageFile="~/Views/Layout/Master.master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="HeadContent" ContentPlaceHolderID="Head" runat="server">
    <link
        rel="stylesheet"
        href="/Assets/Styles/pages/login.css"
        type="text/css"
    />
</asp:Content>
<asp:Content ID="ContentContent" ContentPlaceHolderID="Content" runat="server">
    <div id="app">
        <div class="login">
            <div class="form-row">
                <span class="login-title">Login</span>
            </div>
            <div class="form-row">
                <span class="form-label">username:</span>
                <div class="form-control">
                    <input
                        type="text"
                        v-model="username"
                        placeholder="please enter your username here"
                    />
                </div>
            </div>
            <div class="form-row">
                <span class="form-label">password:</span>
                <div class="form-control">
                    <input
                        v-model="password"
                        type="password"
                        placeholder="please enter your password here"
                    />
                </div>
            </div>
            <div class="form-row">
                <button class="btn btn-login">Sign in</button>
                <button class="btn" @click="toRegister">Sign up</button>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    username: "",
                    password: "",
                };
            },
            methods: {
                toRegister() {
                    window.location = "/Home/Register";
                },
            },
        });
    </script>
</asp:Content>
